<template>
	<div id="one">
		<div class="gong">
			<img :src="topImg" alt="" />
		</div>
		<h2>{{ type }}</h2>
		<div class="one-content">
			<div class="left1" v-if="leftImg.length == 1">
				<img
					src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb1bd61ad71c45a4f67f09b075463944.jpeg?thumb=1&w=293&h=768&f=webp&q=90"
					alt=""
				/>
			</div>
			<div class="left2" v-if="leftImg.length == 2">
				<img :src="item" alt="" v-for="item in leftImg" :key="item" />
			</div>
			<div class="rigth">
				<div class="item" v-for="(item, i) in list" :key="item.product_id || i">
					<div class="im">
						<img
							:src="
								item.img || 'http://47.115.85.237:3000/' + item.product_picture
							"
							alt=""
						/>
					</div>
					<div class="wenzi">
						<p class="name">{{ item.name || item.product_name }}</p>
						<p class="info">{{ item.desc || item.product_title }}</p>
						<p class="price">
							{{ item.price || item.product_selling_price }} 元
						</p>
					</div>
				</div>
				<div class="item">
					<h2 style="text-align:center;line-height:250px">查看更多》</h2>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "one",
	props: {
		type: {
			type: String,
			default: "手机",
		},
		topImg: {
			type: String,
			default:
				"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/431e5fd6bfd1b67d096928248be18303.jpg?thumb=1&w=1533&h=150&f=webp&q=90",
		},
		leftImg: {
			type: Array,
			default: () => {
				return [
					"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb1bd61ad71c45a4f67f09b075463944.jpeg?thumb=1&w=293&h=768&f=webp&q=90",
				];
			},
		},
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
	},

};
</script>

<style lang="scss" scoped>
#one {
	overflow: hidden;
	width: 100%;
	height: auto;
}
.gong {
	margin-top: 20px;
	width: 100%;
	img {
		width: 100%;
	}
}
.one-content {
	.left1 {
		float: left;
		width: 234px;
		height: 614px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.left2 {
		float: left;
		width: 234px;
		height: 614px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		img {
			width: 100%;
			height: 300px;
		}
	}
	.rigth {
		display: flex;
		flex-wrap: wrap;
		height: 614px;
		padding-left: 14px;
		justify-content: space-between;
		align-content: space-between;
		.item {
			width: 226px;
			height: 300px;
			background-color: #fff;
			.im {
				width: 70%;
				margin: 2px auto;
				img {
					width: 100%;
				}
			}
			.wenzi {
				padding: 20px;
				font-size: 14px;
				p {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.info {
					color: #bcbcbc;
					font-size: 12px;
					margin: 10px 0;
				}
				.price {
					margin: 10px 0;
					color: orangered;
					font-size: 16px;
				}
			}
		}
	}
}
</style>
